<template>
	<view class="shopcart">
		<view class="cartBottom" @click="toggleList">
			<view class="flexs2 bot_left">
				<view class="iconBox">
					<text class="allcount" v-if="getAllCount">{{getAllCount}}</text>
					<image src="/static/img/lanzi.png" mode="" class="img"></image>
				</view>
				<view class="lou">洗衣篓</view>
				<!-- 总价 -->
				<!-- <view class="">
					<text class="" :class="getAllCount ?　'active': ''">￥{{getAllPrice}}</text>
					<text class="" style="font-size: 12px;">免配送费|支持自取</text>
				</view> -->
			</view>
			<view class="BtnRight flexs2">
				<text>预约洗衣</text>
			</view>
		</view>
		<!-- 选择的商品 -->
		<view class="cartList" v-show="isShowList && getList.length">
			<view class="title flexs2">
				洗衣篓
			</view>
			<scroll-view scroll-y class="bg-white" style="height: 600upx;">
				<view class="list">
					<view class="list-text" v-for="(item,index) in getList" :key="index">
						<view class="flexs1">
							<view class="flexs3 list_t_left">
								<image class="list_img" :src="urls+item.image"></image>
								<view class="list_name">
									<view class="text-bold">{{item.name}}</view>
									<view class="text-gray">￥{{item.is_jing==1?item.price:item.jing_price}}/件</view>
								</view>
								<view class="text-red text-bold">
									￥<text class="list_qian">{{item.is_jing==1?item.price:item.jing_price}}</text>
								</view>
							</view>
							<cartcontrol :food="item" @add="addCart" @dec="decreaseCart"></cartcontrol>
						</view>
						<view class="flexs3 jingxi">
							<switch class="small cyan" :data-id="item.id" @change="SwitchA" :class="item.is_jing==2?'checked':''" :checked="item.is_jing==2?true:false"></switch>
							<view>是否精洗</view>
							<view class="text-gray" @click="fineCleaning">精洗说明</view>
						</view>
					</view>
					
				</view>
			</scroll-view>
			<view class="cartBottom" >
				<view class="flexs2 bot_left">
					<view class="">
						<text class="yugu" :class="getAllCount ?　'active': ''">预估价格:￥{{getAllPrice}}</text>
						<text v-if="quanP != 0" class="text-red" style="font-size: 12px;">优惠券：-￥{{quanP}}</text>
						<text class="text-gray" style="font-size: 12px;" v-else @click="coupons">
							<text>使用优惠券</text>
							<text class="cuIcon-right"></text>
						</text>
					</view>
				</view>
				<view class="BtnRight BtnRight2 flexs2" @click="yuyue">
					<view class="text-red">
						<text style="font-size: 12px;">合计：￥</text>
						<text>{{jiSuan}}</text>
					</view>
					<view>预约洗衣</view>
				</view>
			</view>
		</view>
		
		<view class="listMask" v-show="isShowList && getList.length" @click="toggleList"></view>
	</view>
</template>

<script>
	import cartcontrol from '@/components/cartcontrol.vue'
	export default {
		props: {
			goods: {
				type: Array
			},
			quanP:{
				type: [Number,String],
				default: 0
			}
		},
		data() {
			return {
				switchA: false,
				isShowList: false,
				urls: this.$common.baseUrl,
				quanAll:'',
				total:''
			};
		},
		components: {
			cartcontrol
		},
		onShow() {
			console.log(this.quanP)
		},
		computed: {
			jiSuan(){
				
				this.quanAll = parseInt(this.total) - parseInt(this.quanP)
				return this.quanAll
			},
			getList() {
				let result = [];
				this.goods.forEach((good) => {
					if (good.count) {
						result.push(good)
						// console.log('res', JSON.stringify(result))
					}
				})
				return result
			},
			// 获得购物车所有商品数量
			getAllCount() {
				let result = 0;
				this.getList.forEach((food) => {
					result += food.count
				})
				return result
			},

			// 总价
			getAllPrice() {
				let result = 0;
				let result1 = 0;
				this.goods.forEach((good) => {
					if(good.is_jing==2){
						result1 += this.accMul(good.count, good.jing_price)
					}else{
						result1 += this.accMul(good.count, good.price)
					}
					
					result = result1.toFixed(2);
				})
				this.total = result
				return result
			}
		},
		onShow() {
			
		},
		methods: {
			SwitchA(e) {
				console.log(e)
				this.switchA = e.detail.value
				this.jingxi(e.target.dataset.id);
			},
			jingxi(id){
				var obj = {
					good_id: id
				}
				this.$common.requests('/api/Shop/jingclean', obj).then(res => {
					if (res.data.code == 1) {
						this.$api.msg(res.data.msg)
						this.getallgood();
					} else {
						this.$api.msg(res.data.msg)
					}
				})
			},
			getallgood(){
				this.$common.requests('/api/Shop/getallgood').then(res => {
					if (res.data.code == 1) {
						this.$emit('allgoods',1);
					} else {
						this.$api.msg(res.data.msg)
					}
				})
			},
			yuyue(){
				this.$emit('yuyue',1);
			},
			// 解决浮点数 运算出现多位小数
			accMul(arg1, arg2) {
				let m = 0,
					s1 = '',
					s2 = '';
				if (arg1 && arg1 != null)
					s1 = arg1.toString();
				if (arg2 && arg2 != null)
					s2 = arg2.toString();
				// console.log('m1',s2.replace('.',''))
				try {
					m += s1.split('.')[1].length
				} catch (e) {}
				try {
					m += s2.split('.')[1].length
				} catch (e) {}

				return Number(s1.replace('.', '')) * Number(s2.replace('.', '')) / Math.pow(10, m);
			},
		

			toggleList() {
				console.log('tog')
				if (this.getList.length) {
					this.isShowList = !this.isShowList;
				}
			},
			delShopcart() {
				this.$emit('delAll');
			},
			addCart: function(item) {
				this.$emit('add', item)
			},
			decreaseCart(item) {
				this.$emit('dec', item)
			},
			fineCleaning(){
				uni.navigateTo({
					url:'../fineCleaning/fineCleaning'
				})
			},
			coupons(){
				uni.navigateTo({
					url:'../coupons/coupons?status=' + 1
				})
			}
		},
	}
</script>

<style scoped>
	.list-text {
		
		border-bottom: 1px solid #E8E8E8;
	}

	.shopcart .cartBottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 54px;
		z-index: 99;
		display: flex;
		background-color: #FFFFFF;
	}

	.bot_left{
		width: 62%;
	}
	.iconBox {
		position: relative;
		margin-right: 30upx;
	}

	.iconBox .allcount {
		position: absolute;
		right: -10px;
		top: 0;
		display: inline-block;
		padding: 1px 5px;
		font-size: 9px;
		line-height: 16px;
		font-weight: 400;
		border-radius: 10px;
		background-color: #FDB212;
		color: #ffffff;
		z-index: 99;
	}
	.lou{
		color: #14C7CE;
	}
	.img {
		font-size: 24px;
		line-height: 24px;
		width: 30px;
		height: 25px;
		padding-left: 6px;
		padding-top: 6px;
		color: #cccccc;
	}

	
	.BtnRight {
		width: 38%;
		background: #14C7CE;
		color: #FFFFFF;
	}
	.BtnRight{
		flex-direction: column;
	}
	.cartList {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		padding-top: 20upx;
	}


	.cartList .title {
		width: 28%;
		border-radius: 30upx;
		height: 60upx;
		color: #FFFFFF;
		background: #14C7CE;
		position: absolute;
		top: -15upx;
		left: 36%;
		z-index: 999;
	}

	.cartList .list-text {
		padding: 10px 6px 10px 8px;
	}

	.list {
		background: #FFFFFF;
		padding-bottom: 10px;
	}
	.list_t_left{
		width: 75%;
	}
	.list_img{
		width: 90upx;
		height: 90upx;
	}
	.list_qian{
		font-size: 35upx;
	}
	.list_name{
		width: 60%;
		text-align: left;
		padding-left: 20upx;
	}
	.text-bold{
		padding-bottom: 10upx;
	}
	/* 遮布 */
	.listMask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 89;
		opacity: 0.5;
		background: #6a7076;
	}
	.small{
		transform: scale(0.7);
	}
	.text-gray{
		font-size: 26upx;
	}
	.jingxi{
		padding-top: 10upx;
	}
	.yugu{
		margin-right: 10upx;
	}
</style>
